<template>
  <div class="order-procure-detail">
    <header>
      <div class="left">
        <p style="line-height: 24px">采购编号：{{ detail.purchaseOrderNo || "-" }}</p>
        <p class="ml32 mr32" style="line-height: 24px">下单时间：{{ detail.orderTime || "-" }}</p>

        <el-button v-if="detail.isProduceConfirmState === 1" type="primary" size="small" @click="openEditor(1, 'edit', detail)"
          >发起生产完成确认</el-button
        >
        <el-button v-if="detail.isInstallConfirmState === 1" type="primary" size="small" @click="openEditor(2, 'edit', detail)"
          >发起安装完成确认</el-button
        >
        <el-button v-if="detail.isSelfPickupState === 2" type="primary" size="small" @click="openEditor(3, 'edit', detail)">
          自提货确认
        </el-button>
        <el-button
          v-if="detail.isDistributeConfirmState === 3"
          type="primary"
          size="small"
          @click="openEditor(4, 'edit', detail)"
        >
          发起配送完成确认
        </el-button>
        <!-- =================================================================== -->
        <!-- 生产 -->
        <el-button
          v-if="[2, 3, 4].includes(detail.isProduceConfirmState)"
          :type="detail.isProduceConfirmState === 2 ? 'primary' : detail.isProduceConfirmState === 3 ? 'primary' : 'danger'"
          size="small"
          plain
          @click="
            () => {
              if (detail.isProduceConfirmState === 4) {
                openEditor(1, 'refuse', detail);
              } else {
                openEditor(1, 'view', detail);
              }
            }
          "
        >
          {{ getStateName(1, detail.isProduceConfirmState) }}
        </el-button>
        <!-- 安装 -->
        <el-button
          v-if="[2, 3, 4].includes(detail.isInstallConfirmState)"
          :type="detail.isInstallConfirmState === 2 ? 'primary' : detail.isInstallConfirmState === 3 ? 'primary' : 'danger'"
          size="small"
          plain
          @click="
            () => {
              if (detail.isInstallConfirmState === 4) {
                openEditor(2, 'refuse', detail);
              } else {
                openEditor(2, 'view', detail);
              }
            }
          "
        >
          {{ getStateName(2, detail.isInstallConfirmState) }}
        </el-button>
        <!-- 自提货 -->
        <el-button
          v-if="[3, 4, 5].includes(detail.isSelfPickupState)"
          :type="detail.isSelfPickupState === 3 ? 'primary' : detail.isSelfPickupState === 4 ? 'primary' : 'danger'"
          size="small"
          plain
          @click="
            () => {
              if (detail.isSelfPickupState === 5) {
                openEditor(3, 'refuse', detail);
              } else {
                openEditor(3, 'view', detail);
              }
            }
          "
        >
          {{ getStateName(3, detail.isSelfPickupState) }}
        </el-button>
        <!-- 配送 -->
        <el-button
          v-if="[4, 5, 6].includes(detail.isDistributeConfirmState)"
          :type="detail.isDistributeConfirmState === 4 ? 'primary' : detail.isDistributeConfirmState === 5 ? 'primary' : 'danger'"
          size="small"
          plain
          @click="
            () => {
              if (detail.isDistributeConfirmState === 6) {
                openEditor(4, 'refuse', detail);
              } else {
                openEditor(4, 'view', detail);
              }
            }
          "
        >
          {{ getStateName(4, detail.isDistributeConfirmState) }}
        </el-button>
      </div>
      <div class="right">
        <template v-if="detail.showShipState === 1">
          <el-button
            link
            type="primary"
            size="small"
            @click="
              toPath({
                path: '/order/procure/send',
                query: { purchaseOrderId: detail.purchaseOrderId, redirect: `/order/procure` }
              })
            "
          >
            发货
          </el-button>
          <el-divider direction="vertical" />
        </template>
        <template v-if="detail.isDistributeConfirmState === 2">
          <el-button
            link
            type="primary"
            size="small"
            @click="
              toPath({
                path: '/order/procure/delivery',
                query: { purchaseOrderId: detail.purchaseOrderId, redirect: `/order/procure` }
              })
            "
          >
            开始配送
          </el-button>
          <el-divider direction="vertical" />
        </template>

        <template v-if="detail.businessState === 2">
          <el-button type="primary" link @click="clickReceive()">接单</el-button>
          <el-divider direction="vertical" />
          <el-button type="primary" link @click="handleOpenReject()">拒绝订单</el-button>
          <el-divider direction="vertical" />
        </template>

        <template v-if="detail.factoryState === 20">
          <el-button type="primary" link @click="clickDel">删除</el-button>
          <el-divider direction="vertical" />
        </template>

        <el-button type="primary" link>打印凭证</el-button>
        <el-divider direction="vertical" />
        <el-button type="primary" link>打印清单</el-button>

        <template v-if="detail.factoryState === 21">
          <el-divider direction="vertical" />
          <el-button link type="primary" @click="clickCancel(detail)"> 同意撤销 </el-button>
          <el-divider direction="vertical" />
          <el-button link type="primary" @click="clickRefuseRevoke(detail)"> 拒绝撤销 </el-button>
        </template>

        <!-- <el-divider direction="vertical" /> -->
        <!-- <el-button type="primary" link @click="back">返回</el-button> -->
      </div>
    </header>
    <div class="content">
      <!-- 交易状态 -->
      <div class="detail-status">
        <h1 :style="{ color: getFactoryStateName()?.color }">{{ getFactoryStateName()?.name }}</h1>
        <template v-if="detail.process === 4">
          <!-- 已完成 -->
          <img v-show="detail.process === 4" src="@/assets/images/order/finish.png" alt="" />
        </template>
        <template v-else>
          <!-- 已拒绝 -->
          <img v-show="detail.factoryState === 3" src="@/assets/images/order/reject.png" alt="" />
          <!-- 部分发货 -->
          <img v-show="detail.factoryState === 5" src="@/assets/images/order/sended-part.png" alt="" />
          <!-- 已发货 -->
          <img v-show="detail.factoryState === 6" src="@/assets/images/order/sended.svg" alt="" />
          <!-- 待接单 -->
          <img v-show="detail.factoryState === 2" src="@/assets/images/order/waiting-receive.png" alt="" />
          <!-- 待发货 -->
          <img v-show="detail.factoryState === 4" src="@/assets/images/order/waiting-send.png" alt="" />
        </template>
      </div>

      <!-- 交易状态、步骤条 -->
      <!-- <div class="steps">
        <el-steps style="max-width: 100%" :active="stepsActive" finish-status="success">
          <el-step title="买家下单" :description="detail.orderTime || '-'" />
          <el-step title="商家接单" :description="detail.dealTime || '-'" />
          <el-step title="商家发货" :description="detail.deliveryTime || '-'" />
          <el-step title="交易完成" :description="detail.finishTime || '-'" />
        </el-steps>
      </div> -->

      <!-- 拒绝原因 -->
      <div class="reject-info" v-if="detail.refuseType">
        <h3>
          拒绝原因：{{
            detail.refuseType === 1
              ? "原材料上涨"
              : detail.refuseType === 2
                ? "商品停产"
                : detail.refuseType === 3
                  ? "缺货无法交易"
                  : detail.refuseType === 4
                    ? "其他原因"
                    : "--"
          }}
        </h3>
        <p>备注：{{ detail.refuseRemarks }}</p>
      </div>

      <!-- 订单信息 -->
      <div class="order-info">
        <!-- 收货信息 -->
        <div class="info1 mb20">
          <p class="title">收货信息</p>
          <el-row>
            <el-col :span="5">
              <b>姓名：{{ detail.receivingName || "-" }}</b>
            </el-col>
            <el-col :span="5">
              <b>电话：{{ detail.receivingMobile || "-" }}</b>
            </el-col>
            <el-col :span="14">
              <b>收货地址：{{ detail.receivingAreaDetail ? detail.receivingAreaDetail + detail.receivingAddress : "-" }}</b>
            </el-col>
          </el-row>
        </div>
        <!-- 客户信息 -->
        <div class="info2 mb20">
          <p class="title">客户信息</p>
          <el-row>
            <el-col :span="5">
              <b>姓名：{{ detail.customer ? detail.customer.split(",")[0] : "-" }}</b>
            </el-col>
            <el-col :span="5">
              <b>电话：{{ detail.customer ? detail.customer.split(",")[1] : "-" }}</b>
            </el-col>
            <el-col :span="14">
              <b>地址：{{ detail.customer ? detail.customer.split(",")[2] : "-" }}</b>
            </el-col>
          </el-row>
        </div>
        <!-- 订单附件 -->
        <div class="info3 mb20">
          <p class="title">订单附件</p>

          <div class="file-list" v-if="detail.attachmentFileUrls !== ''">
            <div class="list-item" v-for="(item, index) in detail.attachmentFileUrls?.split(',')" :key="index">
              <!-- <div @click="downloadFile(item)"><img :src="getUrl(item)" alt="" /></div> -->
              <img v-if="getFileType(item) === 'file'" :src="getUrl(item)" alt="" @click="downloadFile(item)" />
              <el-image
                v-else
                class="mr10"
                style="width: 64px; height: 64px"
                :src="item"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[item]"
                fit="cover"
              />
            </div>
          </div>
          <div v-else>-</div>
        </div>
        <!-- 付款信息 -->
        <div class="info4 mb20">
          <p class="title">付款信息</p>
          <el-row>
            <el-col :span="5">
              <b
                >付款状态：
                <el-tag v-show="detail.payStatus === 3" type="success" size="small">已付款</el-tag>
                <el-tag v-show="detail.payStatus === 2" type="primary" size="small">部分付款</el-tag>
                <el-tag v-show="detail.payStatus === 1" type="warning" size="small">待付款</el-tag>
              </b>
            </el-col>
            <el-col :span="5">
              <b>实付金额：-</b>
            </el-col>
            <el-col :span="6">
              <b>付款方式：-</b>
            </el-col>
            <el-col :span="6">
              <b>付款时间：-</b>
            </el-col>
            <el-col :span="24">
              <div class="mt12 pay-flag">
                <b>付款凭证：</b>
                <div class="file-list">
                  <span>-</span>
                  <div class="list-item" v-for="index in 0" :key="index">
                    <img src="" alt="" />
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 需上传发票文件 -->
        <div class="info-fp mb20" v-if="[4, 5, 6].includes(detail.factoryState)">
          <p class="title">
            需上传发票文件
            <el-button v-if="detail.uploadInvoiceUrls" type="primary" link @click="openInvoice('edit')">
              修改 <el-icon class="ml8"><Edit /></el-icon>
            </el-button>
          </p>
          <el-row>
            <el-col :span="24" v-if="!detail.uploadInvoiceUrls">
              <el-button type="primary" @click="openInvoice('add')">点击上传</el-button>
            </el-col>
            <el-col :span="24" v-else>
              <div class="file-list">
                <div class="list-item" v-for="(item, index) in detail.uploadInvoiceUrls?.split(',')" :key="index">
                  <!-- <div @click="downloadFile(item)"><img :src="getUrl(item)" alt="" /></div> -->
                  <img v-if="getFileType(item) === 'file'" :src="getUrl(item)" alt="" @click="downloadFile(item)" />
                  <el-image
                    v-else
                    class="mr10"
                    style="width: 64px; height: 64px"
                    :src="item"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[item]"
                    fit="cover"
                  />
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 采购商信息 -->
        <div class="info5">
          <p class="title">采购商信息</p>
          <el-row>
            <el-col :span="5">
              <b>买家名称：{{ detail.merchantName || "-" }}</b>
            </el-col>
            <el-col :span="5">
              <!-- <b>采购订单备注：{{ detail.remark || "-" }}</b> -->
              <b v-if="detail.remark" style="display: flex"
                ><span style="display: inline-block; width: 100px">采购订单备注：</span
                ><RemarkEditor v-model="detail.remark" :isEdit="false"
              /></b>
              <b v-else style="display: flex"
                ><span style="display: inline-block; width: 100px">采购订单备注：</span
                ><RemarkEditor v-model="detail.remark" :isEdit="false"
              /></b>
            </el-col>
            <el-col :span="12">
              <b style="color: #ffa100">预计发货日期：{{ detail.expectedDeliveryTime || "-" }}</b>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="block"></div>

      <!-- 快递物流信息/确认记录 -->
      <template
        v-if="detail.factoryState === 4 || detail.factoryState === 5 || detail.factoryState === 6 || detail.process === 4"
      >
        <div class="tabs-wrap">
          <el-radio-group v-model="tabsBtnActive">
            <el-radio-button label="物流信息" :value="1" v-if="[5, 6].includes(detail.factoryState)" />
            <el-radio-button label="确认记录" :value="2" v-if="[4, 5, 6].includes(detail.factoryState)" />
          </el-radio-group>
        </div>
        <!-- 物流信息 -->
        <div class="logis-info mt20" v-if="tabsBtnActive === 1">
          <template v-if="logis.length > 0">
            <div class="item" v-for="(item, index) in logis" :key="index">
              <header>
                <p>{{ item.logisticsCompanyName || "-" }}：{{ item.logisticsTrackNo || "-" }}</p>
                <div>
                  <el-button
                    type="primary"
                    link
                    @click="
                      () => {
                        currObj = item;
                        open1();
                      }
                    "
                    >查看物流</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="$router.push({ path: '/order/procure/edit-logis', query: { packageId: item.packageId } })"
                  >
                    修改物流
                  </el-button>
                  <el-button
                    type="primary"
                    link
                    @click="
                      () => {
                        currObj = item;
                        open2();
                      }
                    "
                    >包裹明细</el-button
                  >
                </div>
              </header>
              <el-row>
                <el-col :span="5">
                  <b>发货方式：快递</b>
                </el-col>
                <el-col :span="5">
                  <b>发货人：{{ item.receivingName || "-" }}</b>
                </el-col>
                <el-col :span="14">
                  <b>发货时间：{{ item.deliveryTime || "-" }}</b>
                </el-col>
                <el-col :span="24">
                  <div class="mt12 pay-flag">
                    <b>物流凭证：</b>
                    <div class="file-list" v-if="item.attachmentFileUrls !== ''">
                      <div
                        class="list-item"
                        v-for="(item2, index2) in item.attachmentFileUrls?.split(',') || []"
                        :key="index2"
                        @click="reviewFile(item2)"
                      >
                        <!-- <img :src="item2" alt="" /> -->
                        <img :src="getUrl(item2)" alt="" />
                      </div>
                    </div>
                    <div v-else>-</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </template>
          <el-empty v-else descriptio="这里暂时什么都没有"></el-empty>
        </div>
        <!-- 确认记录 -->
        <div v-else class="submit-wrap mt20">
          <el-tabs
            v-model="tabsActive"
            class="demo-tabs"
            @tab-change="
              val => {
                getRecord(val);
              }
            "
          >
            <el-tab-pane label="生产完成确认记录" :name="1" v-if="detail?.produceConfirmMsg === 1"></el-tab-pane>
            <el-tab-pane label="安装确认记录" :name="4" v-if="detail?.installConfirmMsg === 1"></el-tab-pane>
            <el-tab-pane label="自提货完成确认记录" :name="3" v-if="detail?.selfPickupConfirmMsg === 1"></el-tab-pane>
            <el-tab-pane label="配送完成确认记录" :name="2" v-if="detail?.distributeConfirmMsg === 1"></el-tab-pane>
          </el-tabs>

          <div
            class="submit-info"
            v-if="
              detail?.produceConfirmMsg === 1 ||
              detail?.installConfirmMsg === 1 ||
              detail?.selfPickupConfirmMsg === 1 ||
              detail?.distributeConfirmMsg === 1
            "
          >
            <template v-if="record.remark || record.refuseReason || record.refuseRemark">
              <div class="remark-info" v-html="record?.remark"></div>
              <div class="refuse-remark-info" v-if="record.refuseReason || record.refuseRemark">
                <p class="jzt-flex-bt mb10">
                  <span style="color: #ff3333">拒绝原因：{{ record?.refuseReason }}</span> <span>{{ record?.confirmTime }}</span>
                </p>
                <div v-html="record?.refuseRemark"></div>
              </div>
            </template>
            <el-empty v-else description="这里暂时什么都没有" :image-size="60"></el-empty>
          </div>
        </div>
        <div class="block"></div>
      </template>

      <!-- 商品信息 -->
      <p class="f18 mb14" style="color: #131414">商品信息</p>
      <div class="prod-info">
        <el-table class="jzt-table" :data="list" border stripe style="width: 100%">
          <el-table-column prop="date" show-overflow-tooltip label="商品信息" width="400">
            <template #default="scope">
              <div class="col1">
                <div>
                  <div class="left prod-img pl40">
                    <img :src="scope.row.mainPicUrl" alt="" />
                    <div class="custom-icon" v-if="scope.row.isCustom === 1">
                      <img src="@/assets/images/custom-icon.png" alt="" style="width: 48px; height: 43px" />
                    </div>
                  </div>
                  <div class="right">
                    <h3 class="name">{{ scope.row.productAliasName }}</h3>
                    <p style="white-space: break-spaces">{{ scope.row.skuSpecification }}</p>
                    <p>SKU编码：{{ scope.row.skuCode || "-" }}</p>
                    <p>ID:{{ scope.row.productId || "-" }}</p>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sendedNum" show-overflow-tooltip label="测量数据反馈" width="280">
            <template #default="scope">
              <div class="text-over2">
                {{ scope.row.measureDataRemark || "-" }}
              </div>
              <el-button type="primary" link @click="clickOpenMeasure(scope.row, 'view')">查看更多</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="remark" show-overflow-tooltip label="备注" width="240">
            <template #default="scope">
              <!-- <span>{{ scope.row.remark || "-" }}</span> -->
              <RemarkEditor v-model="scope.row.remark" :isEdit="false" />
            </template>
          </el-table-column>
          <el-table-column prop="unitPrice" show-overflow-tooltip label="供应单价" width="160" />
          <el-table-column prop="commodityNum" show-overflow-tooltip label="数量" />
          <el-table-column prop="goodsPartNum" show-overflow-tooltip label="件数" />
          <el-table-column prop="sendedNum" show-overflow-tooltip label="已发货数" width="100" />
          <el-table-column prop="sendedPartNum" show-overflow-tooltip label="已发货件数" width="120" />
          <el-table-column prop="discountRate" show-overflow-tooltip label="折扣率(%)" width="100" />
          <el-table-column prop="discountAmount" show-overflow-tooltip label="折扣率(元)" width="100" />
          <el-table-column prop="actualAmount" show-overflow-tooltip label="采购价格" width="100" />
          <el-table-column prop="dealState" fixed="right" show-overflow-tooltip label="状态" width="90">
            <template #default="scope">
              <span>{{ getName("purchase_product_state", scope.row.dealState) }}</span>
              <!-- <el-tag type="primary" effect="dark" size="small">部分发货</el-tag> -->
              <!-- <el-tag type="success" effect="dark" size="small">已完成</el-tag> -->
              <!-- <el-tag type="info" effect="dark" size="small">关闭</el-tag>
          <el-tag type="warning" effect="dark" size="small">待接单</el-tag>
              <el-tag type="danger" effect="dark" size="small">已拒绝</el-tag> -->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 金额、费用 -->
      <footer>
        <div>
          <div class="pay1 mb20">
            <p>
              <span>商品总计：</span><b>{{ list.length }}种商品({{ detail.detailNum }}件)</b>
            </p>
            <p>
              <span>商品总价：</span><b>¥{{ detail.goodsTotalAmount }}</b>
            </p>
            <p>
              <span>优惠金额：</span><b>¥{{ detail.discountAmount }}</b>
            </p>
            <p>
              <span>其他费用：</span><b>¥{{ detail.otherFee }}</b>
            </p>
          </div>
          <div class="pay2">
            <p>
              <span>税额：</span><b>¥{{ detail.invoiceAmount }}</b>
            </p>
            <p>
              <span>应收金额：</span><b>¥{{ detail.payableTotalAmount }}</b>
            </p>
            <p>
              <span>本次应收金额：</span><b>¥{{ detail.currentPayableAmount }}</b>
            </p>
            <p>
              <span>未收金额：</span><b>¥{{ detail.remainTotalAmount }}</b>
            </p>
            <h3>
              <span>实收金额：</span><b>¥{{ detail.actualTotalAmount }}</b>
            </h3>
          </div>
        </div>
      </footer>
    </div>
    <!-- 图片文件预览 -->
    <el-dialog v-model="dialogVisibleImg" title="图片文件预览" width="500">
      <img :src="reviewImgUrl" alt="" style="width: 100%" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisibleImg = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 物流详情弹窗 -->
    <logisDetail :optionInfo="optionInfo1" @close="close1" />
    <!-- 包裹详情弹窗 -->
    <packageDetail :optionInfo="optionInfo2" @close="close2" />

    <!-- 确认接单 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpenReceive"
      :type="'info'"
      :title="'接单提醒'"
      :message="'您正在操作接单，接单前请详细核查订单消息，是否继续执行接单？'"
      :submitBtnText="'确认接单'"
      @submit="returnSubmitReceive"
    />

    <!-- 确认删除 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpenDel"
      :message="'删除后，当前采购单将被永久删除，请谨慎操作，是否继续删除？'"
      :submitBtnText="'确认'"
      @submit="returnSubmitDel"
    />

    <!-- 拒绝订单弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="'拒绝订单'"
      width="500"
      align-center
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <div class="form-wrap">
        <el-form :model="form" ref="formRef" label-width="auto" style="max-width: 600px">
          <el-form-item
            prop="refuseType"
            label="取消原因"
            :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }"
          >
            <el-select v-model="form.refuseType" placeholder="请选择" clearable>
              <el-option v-for="item in causeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="refuseRemarks" label="备注">
            <el-input
              :rows="2"
              type="textarea"
              placeholder="请输入"
              v-model="form.refuseRemarks"
              oninput="value = value.replace(/[!|@|#|$|%|^|&|*|+|~|`|,|.|！|￥]/g, '')"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="refuseOrderSubmit">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 上传发票文件 弹窗 -->
    <UploadInvoiceFile :optionInfo="optionInfoInvoice" @close="closeInvoice" @submit="submitInvoice" />

    <!-- 测量数据反馈-抽屉 -->
    <MeasureDrawer v-model:isOpen="_isOpenMeasure" :optionInfo="optionInfoMeasure" />

    <!-- 发货、生产审核拒绝 | 自提货、配送审核拒绝 | 安装、安装审核拒绝  弹窗 -->
    <EditorDialog
      v-model:isOpen="_isOpenEditor"
      :type="editorDialogInfo.type"
      :title="editorDialogInfo.title"
      :titleTips="editorDialogInfo.titleTips"
      :submitBtnText="editorDialogInfo.submitBtnText"
      :refuseReason="editorDialogInfo.refuseReason"
      :refuseVal="editorDialogInfo.refuseVal"
      :editorVal="editorDialogInfo.editorVal"
      :submitFun="editorDialogInfo.submitFun"
    />

    <!-- 同意撤销 二次确认 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpenCancel"
      :message="cancelTitle"
      :submitBtnText="'确认撤销'"
      @submit="returnSubmitCancel"
    />

    <!-- 拒绝撤销弹窗 -->
    <el-dialog
      v-model="dialogVisible2"
      :title="'拒绝撤销订单'"
      width="500"
      align-center
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose2"
    >
      <template #header>
        <p><i class="icon"></i>拒绝撤销订单</p>
      </template>
      <div class="form-wrap">
        <el-form :model="form2" ref="formRef2" label-width="auto" style="max-width: 600px">
          <el-form-item
            prop="cancelRejectType"
            label="取消原因"
            :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }"
          >
            <el-select v-model="form2.cancelRejectType" placeholder="请选择" clearable>
              <el-option v-for="item in causeList2" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="cancelRejectRemark" label="备注">
            <el-input
              :rows="2"
              type="textarea"
              placeholder="请输入"
              v-model="form2.cancelRejectRemark"
              oninput="value = value.replace(/[!|@|#|$|%|^|&|*|+|~|`|,|.|！|￥]/g, '')"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="jzt-button" type="info" @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="refuseRevokeSubmit">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import logisDetail from "./components/logisDetail";
import packageDetail from "./components/packageDetail";
import {
  getDetail,
  packageDetailApi,
  findOrder,
  packageInfo,
  acceptOrder,
  refuseOrder,
  delOrder,
  confirmProduceFinish,
  confirmSelfPickup,
  confirmInstallFinish,
  confirmDistributeFinish,
  getConfirmMsg,
  saveInvoiceFile,
  approvalCancel
} from "@/apis/order/procure";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import useCodeArrStore from "@/store/modules/select";
import word from "@/assets/word.png";
import pdf from "@/assets/pdf.png";
import RemarkEditor from "@/components/RemarkEditor";
import { ElMessage } from "element-plus";
import ActionSubmitDialog from "@/components/ActionSubmitDialog";
import { Edit } from "@element-plus/icons-vue";
import UploadInvoiceFile from "./components/uploadInvoiceFile.vue";
import MeasureDrawer from "@/views/order/measure/components/measureDrawer.vue";
import EditorDialog from "./components/editorDialog.vue";
import { getFileNameByUrl } from "@/utils";

const stepsActive = ref(1);
const list = ref([]);
const optionInfo1 = ref({ isShow: false, detail: [] });
const optionInfo2 = ref({ isShow: false, detail: [] });
const purchaseOrderId = ref(route.query.purchaseOrderId);
const detail = ref({});
const logis = ref([]); //物流list
const currObj = ref({});
const redirect = ref("");
const _isOpenReceive = ref(false);
const dialogVisible = ref(false); //拒绝订单-弹窗
const form = ref({}); //拒绝订单表单
const formRef = ref();
const causeList = ref([
  { label: "原材料上涨", value: 1 },
  { label: "商品停产", value: 2 },
  { label: "缺货无法交易", value: 3 },
  { label: "其他原因", value: 4 }
]); //取消原因 下拉数据
const dialogVisibleImg = ref(false);
const reviewImgUrl = ref("");
const _isOpenDel = ref(false);
const optionInfoInvoice = ref({
  isShow: false
});
const _isOpenMeasure = ref(false); //测量数据反馈-抽屉
const optionInfoMeasure = ref({ detail: {} });
const tabsBtnActive = ref(1);
const tabsActive = ref(null);
const record = ref({});
const _isOpenEditor = ref(false); //发货、生产审核拒绝、自提货、配送审核拒绝、安装、安装审核拒绝  弹窗
const editorDialogInfo = ref({});
const cancelTitle = ref("");
const _isOpenCancel = ref(false);
const dialogVisible2 = ref(false);
const formRef2 = ref();
const form2 = ref({}); //拒绝撤销表单
const causeList2 = ref([
  { label: "原料已采购", value: 1 },
  { label: "订单已安排生产", value: 2 },
  { label: "部分商品已生产", value: 3 },
  { label: "其他原因", value: 4 }
]); //拒绝原因 下拉数据

onMounted(async () => {
  redirect.value = route.query.redirect;
  await getDetailFun();

  if (detail.value?.produceConfirmMsg === 1) {
    tabsActive.value = 1;
    getRecord(1); // 查询生产完成确认记录
  } else if (detail.value?.installConfirmMsg === 1) {
    tabsActive.value = 4;
    getRecord(4); // 查询安装确认记录
  } else if (detail.value?.selfPickupConfirmMsg === 1) {
    tabsActive.value = 3;
    getRecord(3); // 查询自提货完成确认记录
  } else if (detail.value?.distributeConfirmMsg === 1) {
    tabsActive.value = 2;
    getRecord(2); // 查询配送完成确认记录
  }
});

const getFactoryStateName = () => {
  if (detail.value.process === 4) {
    return {
      name: "交易完成！",
      val: 4,
      color: "#19cc15"
    };
  } else {
    const arr = [
      { name: "订单已拒绝", val: 3, color: "#ff3333" },
      { name: "订单部分发货", val: 5, color: "#007dff" },
      { name: "订单已发货", val: 6, color: "#19cc15" },
      { name: "待接单", val: 2, color: "#ff9900" },
      { name: "待发货", val: 4, color: "#ff9900" },
      { name: "已撤销", val: 20, color: "#ff3333" },
      { name: "撤销审核中", val: 21, color: "#ff3333" },
      { name: "拒绝撤销", val: 22, color: "#ff3333" }
    ];
    const obj = arr.find(item => item.val === detail.value.factoryState);
    return obj;
  }
};

//打开拒绝撤销form信息弹窗
const clickRefuseRevoke = row => {
  currObj.value = row;
  dialogVisible2.value = true;
  nextTick(() => {
    formRef2.value.resetFields();
  });
};
//关闭拒绝撤销form信息弹窗
const handleClose2 = () => {
  dialogVisible2.value = false;
};

/**
 * 拒绝撤销
 */
const refuseRevokeSubmit = () => {
  formRef2.value.validate(valid => {
    if (valid) {
      const params = {
        opinion: 2, //审核意见。1-同意。2-拒绝
        purchaseOrderId: currObj.value.purchaseOrderId,
        ...form2.value
      };
      approvalCancel(params).then(res => {
        if (res.code === 200) {
          ElMessage({
            message: "已拒绝撤销",
            type: "success"
          });
          handleClose2();
          getDetailFun();
        }
      });
    } else {
      console.log("error submit!");
    }
  });
};

/**
 * 同意撤销二次弹窗
 */
const clickCancel = row => {
  currObj.value = row;
  cancelTitle.value = `您正在操作（${row.purchaseOrderNo}）撤销采购单审核确认，确认撤销前请详细核查订单信息，通过后此订单将作废，请谨慎操作，是否继续撤销！`;
  _isOpenCancel.value = true;
};
/**
 * 确认“同意撤销”
 */
const returnSubmitCancel = () => {
  const params = {
    opinion: 1, //审核意见。1-同意。2-拒绝
    purchaseOrderId: currObj.value.purchaseOrderId
  };
  approvalCancel(params).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "已同意撤销",
        type: "success"
      });
      _isOpenCancel.value = false;
      getDetailFun();
    }
  });
};

/**
 *获取确认信息
 * @param type 类型;1 生产 2：发货/配送 3：自提货 4：安装确认
 */
const getRecord = type => {
  getConfirmMsg({ purchaseOrderId: route.query.purchaseOrderId, type }).then(res => {
    if (res.code === 200) {
      record.value = res.data;
    }
  });
};

/**
 *
 * @param type 1-生产  2-安装 3-自提货 4-配送
 * @param val 状态值
 */
const getStateName = (type, val) => {
  let Arr = [];
  if (type === 1) {
    Arr = [
      { label: "待发起生产确认", val: 1 },
      { label: "已发起生产确认", val: 2 },
      { label: "生产完成确认成功", val: 3 },
      { label: "生产完成确认失败", val: 4 }
    ];
  } else if (type === 2) {
    Arr = [
      { label: "待发起安装确认", val: 1 },
      { label: "已发起安装确认", val: 2 },
      { label: "安装完成确认成功", val: 3 },
      { label: "安装完成确认失败", val: 4 }
    ];
  } else if (type === 3) {
    Arr = [
      { label: "不可自提货", val: 1 },
      { label: "待自提货确认", val: 2 },
      { label: "已发起自提货确认", val: 3 },
      { label: "自提货确认成功", val: 4 },
      { label: "自提货确认失败", val: 5 }
    ];
  } else if (type === 4) {
    Arr = [
      { label: "不可配送", val: 1 },
      { label: "待配送", val: 2 },
      { label: "待配送完成确认", val: 3 },
      { label: "已发起配送完成确认", val: 4 },
      { label: "配送完成确认成功", val: 5 },
      { label: "配送完成确认失败", val: 6 }
    ];
  }
  const obj = Arr.find(item => item.val === val);
  return obj.label || "-";
};

/**
 *
 * @param stage 1-生产  2-安装 3-自提货 4-配送
 * @param type edit-编辑 refuse-拒绝 view-只读查看
 * @param row 点击的当前行数据
 */
const openEditor = async (stage = 1, type, row) => {
  currObj.value = row;
  console.log("currObj========", currObj.value);

  //获取确认消息
  const res = await getConfirmMsg({
    type: stage === 1 ? 1 : stage === 2 ? 4 : stage === 3 ? 3 : 2,
    purchaseOrderId: currObj.value.purchaseOrderId
  });
  console.log("获取确认消息", res.data);
  editorDialogInfo.value.type = type;
  editorDialogInfo.value.editorVal = res.data.remark || "";
  // editorDialogInfo.value.editorVal = "这是备注信息";
  if (stage === 1) {
    editorDialogInfo.value.title = "发货确认";
    editorDialogInfo.value.titleTips = "提交后需等采购商确认后生效";
    editorDialogInfo.value.submitFun = confirmProduceFinishFun;
  } else if (stage === 2) {
    editorDialogInfo.value.title = "安装完成确认";
    editorDialogInfo.value.titleTips = "提交后需等采购商确认后生效";
    editorDialogInfo.value.submitFun = confirmInstallFinishFun;
  } else if (stage === 3) {
    editorDialogInfo.value.title = "自提货完成确认";
    editorDialogInfo.value.titleTips = "请确保采购商已上门自提，提交后需要采购商确认！";
    editorDialogInfo.value.submitFun = confirmSelfPickupFun;
  } else if (stage === 4) {
    editorDialogInfo.value.title = "配送完成确认";
    editorDialogInfo.value.titleTips = "提交后需等采购商确认后生效";
    editorDialogInfo.value.submitFun = confirmDistributeFinishFun;
  }
  if (type === "refuse") {
    editorDialogInfo.value.submitBtnText = "重新提交";
    editorDialogInfo.value.refuseReason = res.data.refuseReason; //拒绝原因 refuseReason
    editorDialogInfo.value.refuseVal = res.data.refuseRemark; //拒绝备注 富文本 refuseRemark
    //   editorDialogInfo.value.refuseVal = `<p>222</p><div data-w-e-type="video" data-w-e-is-void>
    // <video poster="" controls="true" width="auto" height="auto"><source src="https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-09-04/qq1725420238058.mp4" type="video/mp4"/></video>
    // </div><p><br></p>`;
  } else if (type === "view") {
    editorDialogInfo.value.submitBtnText = "";
    editorDialogInfo.value.refuseVal = "";
  } else if (type === "edit") {
    editorDialogInfo.value.submitBtnText = "确认提交";
    editorDialogInfo.value.refuseVal = "";
  }

  _isOpenEditor.value = true;
};

//1-发起生产完成确认
const confirmProduceFinishFun = remark => {
  confirmProduceFinish({ remark, purchaseOrderId: currObj.value.purchaseOrderId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "已发起生产完成确认",
        type: "success"
      });
      getDetailFun();
      _isOpenEditor.value = false;
    }
  });
};

//2-发起安装完成确认
const confirmInstallFinishFun = remark => {
  confirmInstallFinish({ remark, purchaseOrderId: currObj.value.purchaseOrderId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "已发起安装完成确认",
        type: "success"
      });
      getDetailFun();
      _isOpenEditor.value = false;
    }
  });
};

//3-发起自提货完成确认
const confirmSelfPickupFun = remark => {
  confirmSelfPickup({ remark, purchaseOrderId: currObj.value.purchaseOrderId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "已发起自提货完成确认",
        type: "success"
      });
      getDetailFun();
      _isOpenEditor.value = false;
    }
  });
};

//4-发起配送完成确认
const confirmDistributeFinishFun = remark => {
  confirmDistributeFinish({ remark, purchaseOrderId: currObj.value.purchaseOrderId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "已发起配送完成确认",
        type: "success"
      });
      getDetailFun();
      _isOpenEditor.value = false;
    }
  });
};

//测量数据回馈-抽屉
const clickOpenMeasure = (row, type = "edit") => {
  currObj.value = row;
  optionInfoMeasure.value.type = type;
  optionInfoMeasure.value.detail = {
    ...row,
    _time: new Date()
  };
  _isOpenMeasure.value = true;
};

// 打开发票文件-弹窗
const openInvoice = (type = "add") => {
  optionInfoInvoice.value.isShow = true;
  optionInfoInvoice.value.type = type;
  if (type === "edit") {
    const arr = detail.value.uploadInvoiceUrls?.split(",");
    optionInfoInvoice.value.list = arr.map(url => {
      return {
        name: getFileNameByUrl(url),
        status: "success",
        img: url
      };
    });
  } else {
    optionInfoInvoice.value.list = [];
  }
};
// 关闭发票文件-弹窗
const closeInvoice = () => {
  optionInfoInvoice.value.isShow = false;
};

// 发票文件submit回调-弹窗
const submitInvoice = fileList => {
  console.log("上传的发票文件", fileList);
  const fileStr = fileList.map(item => item.img)?.join(",") || "";
  saveInvoiceFile({ purchaseOrderId: route.query.purchaseOrderId, invoiceFile: fileStr }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "发票文件上传成功",
        type: "success"
      });
      getDetailFun();
    }
  });
  optionInfoInvoice.value.isShow = false;
};

const toPath = obj => {
  //打开新页签
  const routeUrl = router.resolve(obj);
  window.open(routeUrl.href, "_blank");
};

//删除弹窗打开
const clickDel = () => {
  _isOpenDel.value = true;
};
//确认删除
const returnSubmitDel = () => {
  delOrder({ purchaseOrderId: detail.value.purchaseOrderId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "删除成功",
        type: "success"
      });
      _isOpenDel.value = false;
      back();
    }
  });
};

// 打开拒绝订单弹窗
const handleOpenReject = () => {
  dialogVisible.value = true;
  nextTick(() => {
    formRef.value.resetFields();
  });
};
//关闭拒绝订单弹窗
const handleClose = () => {
  dialogVisible.value = false;
};
//确认拒绝订单
const refuseOrderSubmit = () => {
  refuseOrder({
    purchaseOrderId: detail.value.purchaseOrderId,
    ...form.value
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "拒绝订单成功",
        type: "success"
      });
      getDetailFun();
      handleClose();
    }
  });
};

//接单弹窗打开
const clickReceive = () => {
  _isOpenReceive.value = true;
};
//确认接单
const returnSubmitReceive = () => {
  acceptOrder({ purchaseOrderId: detail.value.purchaseOrderId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "接单成功",
        type: "success"
      });
      getDetailFun();
      _isOpenReceive.value = false;
    }
  });
};

const getFileType = url => {
  const fileArr = ["doc", "docx", "pdf"];
  const fileSuffix = url?.split(".")[url?.split(".").length - 1] || "";
  const type = fileArr.includes(fileSuffix.toLowerCase()) ? "file" : "img";
  return type;
};

const reviewFile = url => {
  const type = getFileType(url);
  console.log("这个文件是==", type);
  if (type === "file") {
    // 文件下载
    downloadFile(url || "");
  } else if (type === "img") {
    // 图片预览
    reviewImgUrl.value = url;
    dialogVisibleImg.value = true;
  }
};

/**
 * 下载附件
 */
const downloadFile = url => {
  console.log("这是下载附件操作", url);
  if (!url) return;
  const urlSplit = url ? url.split("/") : [];
  const name = decodeURIComponent(urlSplit[urlSplit.length - 1]);
  let xhr = new XMLHttpRequest();
  xhr.open("get", url, true);
  xhr.responseType = "blob";
  xhr.onload = function (e) {
    if (xhr.status === 200) {
      let file = xhr.response;
      let fileName = name;
      if ("msSaveOrOpenBlob" in navigator) {
        window.navigator.msSaveOrOpenBlob(file, fileName);
      } else {
        let fileUrl = window.URL.createObjectURL(file);
        let a = document.createElement("a");
        a.download = fileName;
        a.href = fileUrl;
        document.getElementsByTagName("body")[0].appendChild(a);
        a.click();
        a.parentNode.removeChild(a);
        window.URL.revokeObjectURL(fileUrl);
      }
    }
  };
  xhr.send();
};

const back = () => {
  if (redirect.value) {
    const query = route.query;
    delete query.redirect;
    router.push({ path: redirect.value, query: query });
  }
};

const getUrl = url => {
  const fileArr = ["doc", "docx"];
  const fileSuffix = url?.split(".")[url?.split(".").length - 1] || "";
  const type = fileArr.includes(fileSuffix.toLowerCase()) ? "doc" : fileSuffix.toLowerCase() === "pdf" ? "pdf" : "img";
  return type === "pdf" ? pdf : type === "doc" ? word : url;
};

const getName = (key, value) => {
  return useCodeArrStore().getDictName(key, value) || "-";
};

const getDetailFun = async () => {
  await getDetail({ purchaseOrderId: purchaseOrderId.value }).then(res => {
    if (res.code === 200) {
      detail.value = res.data;
      // detail.value.remark =
      //   "<p>aaasssdd</p><p><img src=\"http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-09-14/collect_ok1726298672738.png\" alt=\"\" data-href=\"\" style=\"\"/></p>";

      stepsActive.value = res.data.process - 1;
      list.value = res.data.productInfoList;
      console.log("订单详请===", res.data);
    }
  });
  packageDetailApi({ purchaseOrderId: purchaseOrderId.value }).then(res => {
    if (res.code === 200) {
      logis.value = res.data;
      console.log("物流列表===", res.data);
    }
  });
};

//拼接商品的sku规格
const getSpes = properties => {
  if (!properties) return "-";
  const arr = JSON.parse(properties) || [];
  if (arr.length > 1) {
    const str = arr.reduce((a, b) => {
      return a.specificationVal + "+" + b.specificationVal;
    });
    return str;
  } else if (arr.length === 1) {
    return arr[0].specificationVal;
  } else {
    return "-";
  }
};

//打开物流详情弹窗
const open1 = () => {
  optionInfo1.value.isShow = true;
  findOrder({
    com: currObj.value.logisticsCompanyNo, //快递公司code
    num: currObj.value.logisticsTrackNo //快递单号
  }).then(res => {
    if (res.code === 200) {
      // console.log("物流详情", res.data.data);
      optionInfo1.value.detail = res.data;
    }
  });
};
//关闭物流详情弹窗
const close1 = () => {
  optionInfo1.value.isShow = false;
};
//打开包裹详情弹窗
const open2 = () => {
  optionInfo2.value.isShow = true;
  packageInfo({ packageId: currObj.value.packageId }).then(res => {
    if (res.code === 200) {
      // console.log("包裹明细", res.data.data);
      optionInfo2.value.detail = res.data.purchasePackageList;
    }
  });
};
//关闭包裹详情弹窗
const close2 = () => {
  optionInfo2.value.isShow = false;
};
</script>

<style lang="scss" scoped>
.prod-img {
  position: relative;
  .custom-icon {
    position: absolute;
    top: -5px;
    left: 12px;
  }
}
:deep(.submit-info) {
  padding: 20px;
  .el-empty {
    padding: 0;
    height: 116px;
  }
  .remark-info,
  .refuse-remark-info {
    padding: 20px;
    // border: 1px solid #dcdfe6;

    min-height: 100px;
    max-height: 150px;
    overflow: auto;
    img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      margin: 10px 10px 0 0;
    }
    video {
      width: 130px;
      height: 80px;
    }
  }
  .remark-info {
    padding: 0;
    margin-bottom: 16px;
  }
  .refuse-remark-info {
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #e1e6ed;
    background-color: white;
  }
}
.submit-wrap {
  background: #f6f8fa;
  border-radius: 4px 4px 4px 4px;
  :deep(.el-tabs__header) {
    margin-bottom: 0px;
    .el-tabs__nav-wrap {
      padding: 0px 20px;
      .el-tabs__item {
        height: 50px;
        line-height: 50px;
      }
    }
  }
}
.tabs-wrap {
  :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
    background-color: white;
    color: #007dff;
  }
}
:deep(.el-dialog__header) {
  font-size: 18px;
  color: #131414;
  .icon {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #007dff;
    margin: 0 8px 4px 0;
  }
}
:deep(.el-dialog__footer) {
  text-align: center;
}
.block {
  height: 20px;
  margin: 32px -20px;
  background-color: #f5f7fa;
}
.order-procure-detail {
  height: calc(100% - 20px);
  overflow-y: auto;
  padding: 0 20px 20px 20px;
  & > header {
    padding: 20px;
    margin: 0 -20px;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background-color: white;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #d8d8d8;
    z-index: 22;
    .left {
      display: flex;
    }
  }
  .steps {
    height: 70px;
  }
  .content {
    :deep(.el-steps) {
      // padding-left: 16%;
      .el-step__icon-inner {
        font-weight: normal;
      }
      .el-step {
        position: relative;
        flex-basis: 40% !important;
        .el-step__head.is-success {
          border-color: transparent;
          .el-step__line {
            height: 0;
            background-color: transparent;
          }
          .el-step__icon.is-text {
            background-color: #e8f3ff;
            color: #165dff;
          }
        }
        .el-step__head.is-process {
          .el-step__icon.is-text {
            border: none;
            background-color: #165dff;
            color: white;
            .el-step__icon-inner {
              font-weight: normal;
            }
          }
        }
        .el-step__head.is-wait {
          .el-step__icon.is-text {
            border: none;
            background-color: #f2f3f5;
            color: #4e5969;
          }
        }
        .el-step__title.is-wait {
          color: #4e5969;
        }
        .el-step__main {
          position: absolute;
          top: -8px;
          left: 40px;
          width: 200px;
          .el-step__title {
            font-weight: normal;
            &.is-success {
              color: #4e5969;
            }
          }
          .el-step__description {
            color: #86909c;
          }
        }
        .el-step__line-inner {
          border: none;
        }
        .el-step__line {
          left: 160px;
          right: 25px;
          height: 0px;
          background-color: transparent;
          border-bottom: 1px dashed #d8d8d8;
        }
      }
    }
    .detail-status {
      display: flex;
      justify-content: space-between;
      margin: 10px 0 10px 0;
      h1 {
        font-size: 24px;
      }
      img {
        width: 62px;
        height: 62px;
      }
    }

    .order-info {
      background-color: #f6f8fa;
      border-radius: 4px;
      padding: 20px;
      .title {
        font-size: 16px;
        color: #86909c;
        margin-bottom: 10px;
      }
    }
    .el-col {
      b {
        color: #1a1a1a;
        font-size: 14px;
        font-weight: normal;
      }
    }
    .file-list {
      display: flex;
      flex-wrap: wrap;
      .list-item {
        cursor: pointer;
      }
      img {
        width: 64px;
        height: 64px;
        margin-right: 10px;
      }
    }
    .pay-flag {
      display: flex;
      b {
        display: inline-block;
        width: 75px;
      }
      & > div {
        flex: 1;
      }
    }
    .reject-info {
      padding: 20px;
      border-radius: 4px;
      border: 1px solid #dcdcdc;
      margin-bottom: 20px;
      h3 {
        color: #ff3333;
        margin-bottom: 16px;
        font-size: 18px;
        font-weight: normal;
      }
      p {
        font-size: 14px;
      }
    }
    .logis-info {
      max-height: 300px;
      overflow-y: auto;
      .item {
        background: #f6f8fa;
        border-radius: 4px 4px 4px 4px;
        margin-bottom: 10px;
        header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 20px;
          border-bottom: 1px solid #c2d4e8;
          p {
            padding-left: 12px;
            position: relative;
            &::before {
              position: absolute;
              content: "";
              height: 14px;
              width: 4px;
              background-color: #007dff;
              left: -2px;
              top: 1px;
            }
          }
        }
        .el-row {
          padding: 15px 20px;
        }
      }
    }
    .prod-info {
      .col1 {
        & > div {
          display: flex;
        }

        .left {
          img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
          }
        }
        .right {
          padding-left: 18px;
          .name {
            font-size: 14px;
            color: #3d3d3d;
            margin-bottom: 5px;
          }
          p {
            font-size: 12px;
            color: #86909c;
            margin-bottom: 5px;
          }
        }
      }
    }
    & > footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      p,
      h3 {
        text-align: right;
        color: #86909c;
        line-height: 24px;
        margin-bottom: 10px;
        b {
          display: inline-block;
          width: 120px;
          font-weight: normal;
        }
      }
      .pay1 {
        p {
          font-size: 14px;
        }
      }
      .pay2 {
        p {
          color: #3d3d3d;
          font-size: 16px;
        }
        h3 {
          font-size: 18px;
          color: #3d3d3d;
          b {
            color: #ff3333;
          }
        }
      }
    }
  }
}
</style>
